<template>
  <u-popup :show="value" @close="close" round="10" mode="center" closeable>
    <view
      :class="[
        'editPassword',
        current == 0 ? 'taba' : '',
        current == 1 ? 'tabb' : ''
      ]"
    >
      <view class="title">
        <view class="left-icon">
          <image
            src="https://oss.xhoven.com/56e6dffc8ccf1b271a4ea9bc4b8d5e75.png"
            mode="scaleToFill"
          />
        </view>
        <view class="content">{{ title }}</view>
        <view class="right-icon">
          <image
            src="https://oss.xhoven.com/56e6dffc8ccf1b271a4ea9bc4b8d5e75.png"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="list" v-if="current == 0">
        <view class="list-box">
          <view class="item" v-for="(v, i) in userList" :key="i">
            <view class="name">{{ v.nickname }}</view>
            <view class="edit" @click="editClick(v.id)"
              ><image
                src="https://oss.xhoven.com/3efb3c2ed88580b5500f2bcae14f0a62.png"
                mode="scaleToFill"
            /></view>
            <view class="status">
              <u-switch
                :value="!!v.status"
                @change="change(v.id, i, v.status)"
              ></u-switch>
            </view>
          </view>
        </view>
        <view class="btn" @click="addClick">+ 导购</view>
      </view>
      <view class="password" v-if="current == 1">
        <view class="line">
          <view class="label">姓名</view>
          <view class="input">
            <u--input
              placeholder="请输入姓名"
              border="surround"
              v-model="form.nickname"
              :customStyle="{
                height: '100%',
                borderColor: '#7b7b7b !important'
              }"
            ></u--input>
          </view>
        </view>
        <view class="line">
          <view class="label">手机</view>
          <view class="input">
            <u--input
              placeholder="请输入手机"
              border="surround"
              v-model="form.mobile"
              :customStyle="{
                height: '100%',
                borderColor: '#7b7b7b !important'
              }"
            ></u--input>
          </view>
        </view>
        <view class="line" style="margin-bottom:90rpx">
          <view class="label wx none">微信</view>
          <view class="input" @click="addpic">
            <view class="picA">
              <text v-if="!bolPic">+</text>
              <view class="close" v-show="bolPic" @click.stop="deletepic"
                >x</view
              >
              <image :src="pic.img" v-show="bolPic" mode="scaleToFill" />
            </view>
          </view>
        </view>
        <view class="line">
          <view class="label none">微信号:</view>
          <view class="input">
            <u--input
              placeholder="请输入微信号"
              border="surround"
              v-model="form.wechat"
              :customStyle="{
                height: '100%',
                borderColor: '#7b7b7b !important'
              }"
            ></u--input>
          </view>
        </view>
        <view class="line">
          <view class="label">状态</view>
          <view class="input">
            <u-switch v-model="form.status"></u-switch>
          </view>
        </view>
        <view class="line">
          <view class="label">角色</view>
          <view class="input">
            <Dropdown
              ref="Dropdown"
              v-model="form.role_id"
              :options="roleList"
            />
          </view>
        </view>
        <view class="btn" @click="submitEvent">
          保存
        </view>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </u-popup>
</template>

<script>
import Dropdown from '../components/dropdown/dropdown.vue'
export default {
  components: {
    Dropdown
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    mobile: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      current: 0,
      userList: [],
      mode: '',
      roleList: '',
      form: {
        nickname: '',
        mobile: '',
        role_id: '',
        wechat_image: '',
        wechat: '',
        status: true
      },
      pic: {
        img: [],
        file: []
      },
      bolPic: false,
      id: ''
    }
  },
  computed: {
    title () {
      switch (this.current) {
        case 0:
          return '导购管理'
        case 1:
          if (this.mode == 'add') {
            return '新增导购'
          } else {
            return '编辑导购'
          }
        default:
          break
      }
    }
  },
  methods: {
    async getList () {
      const res = await this.$api.my.roleList()
      this.userList = res.data
    },
    async change (id, i, value) {
      await this.$api.my.UserEdit({
        id: id,
        status: value == 1 ? 0 : 1
      })
      this.getList()
    },
    async getOptionsList () {
      const res = await this.$api.my.roleOptions()
      this.roleList = res.data.map(v => {
        return {
          value: v.id,
          label: v.name
        }
      })
    },
    async addClick () {
      this.current = 1
      this.mode = 'add'
    },
    deletepic () {
      this.pic = {
        img: [],
        file: []
      }
      this.bolPic = false
    },
    addpic () {
      uni.chooseImage({
        success: v => {
          if (this.pic.img.length > 1) {
            uni.showToast({
              title: '最大支持1张照片!',
              icon: 'fail',
              mask: true
            })
          }
          console.log(v)
          this.pic.img = v.tempFilePaths
          this.pic.file = v.tempFiles
          this.pic.img.splice(1)
          this.pic.file.splice(1)
          this.bolPic = true
        }
      })
    },
    async editClick (v) {
      this.id = v
      this.current = 1
      const res = await this.$api.my.UserDetail({ id: v })
      this.form = {
        nickname: res.data.nickname,
        mobile: res.data.mobile,
        status: !!res.data.status,
        role_id: res.data.role_id
      }
      this.$refs.Dropdown.setValue(res.data.role_id)
      if (res.data.wechat_image) {
        this.pic.img = res.data.wechat_image
        this.pic.file = 'abcdefg'
        this.bolPic = true
      }
      console.log(this.pic)
      this.mode = 'edit'
    },
    async submitEvent () {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      if (!this.form.nickname) {
        uni.$u.toast('请填写名字')
        return
      }
      if (!this.form.mobile) {
        uni.$u.toast('请填写电话')
        return
      }
      const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      if (!reg.test(this.form.mobile)) {
        this.form.mobile = ''
        uni.$u.toast('请填写正确的电话')
        return
      }
      // if (!this.pic.img) {
      //   uni.$u.toast('请填写微信二维码')
      //   return
      // }
      if (!this.form.role_id) {
        uni.$u.toast('请选择角色')
        return
      }
      if (this.pic.file == 'abcdefg' || this.pic.file !== []) {
        this.form.wechat_image = this.pic.img
      } else {
        if (this.pic.img) {
          const res = await this.$api.common.upload({
            file: this.pic.file,
            filePath: this.pic.img,
            header: {
              Authorization: `Bearer ${uni.getStorageSync('token')}`
            }
          })
          this.form.wechat_image = res.data.url
        }
      }
      this.form.status = this.form.status ? 1 : 0
      try {
        let res
        if (this.mode == 'add') {
          res = await this.$api.my.UserAdd(this.form)
        } else {
          res = await this.$api.my.UserEdit({ ...this.form, id: this.id })
        }
        console.log(res)
        this.current = 0
        this.getList()
        uni.hideLoading()
      } catch (error) {
        console.log(error)
        uni.hideLoading()
        uni.$u.toast(error.msg)
      }
    },
    close () {
      this.current = 0
      this.form = {
        nickname: '',
        mobile: '',
        role_id: '',
        wechat_image: '',
        wechat: '',
        status: true
      }
      this.pic = {
        img: [],
        file: []
      }
      this.bolPic = false
      this.$emit('input', false)
    }
  }
}
</script>

<style lang="less" scoped>
.taba {
  min-width: 600rpx;
  min-height: 250rpx;
  max-height: 550rpx;
  position: relative;
}

.tabb {
  min-width: 600rpx;
  min-height: 828rpx;
}
.editPassword {
  padding-top: 60rpx;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 35rpx;
    .left-icon {
      width: 30rpx;
      height: 30rpx;
    }
    .content {
      color: #333333;
      font-weight: 600;
      font-size: 34rpx;
      margin: 0 13rpx;
      letter-spacing: 4rpx;
    }
    .right-icon {
      width: 30rpx;
      height: 30rpx;
      transform: rotateY(180deg);
    }
  }
  .password {
    padding: 40rpx;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    .line {
      margin-bottom: 32rpx;
      display: flex;

      .label {
        display: flex;
        align-items: center;
        width: 115rpx;
        width: 140rpx;
        &::after {
          content: '*';
          color: red;
          margin-left: 15rpx;
        }
      }
      .none {
        &::after {
          content: '';
        }
      }
      .input {
        width: 407rpx;
        height: 64rpx;
        // border: 1px solid #000;
      }
    }
    .picA {
      width: 120rpx;
      height: 120rpx;
      border: 1px solid #7b7b7b;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 75rpx;
      position: relative;
      .close {
        position: absolute;
        top: -5rpx;
        right: 8rpx;
        font-size: 30rpx;
      }
    }
    .wx {
      position: relative;
      &::before {
        content: '微信二维码';
        position: absolute;
        top: 55rpx;
        color: #ff5757;
        font-size: 17rpx;
      }
    }
    .btn {
      width: 100%;
      height: 88rpx;
      background-color: #3e73fe;
      font-size: 31rpx;
      text-align: center;
      line-height: 88rpx;
      border-radius: 88rpx;
      color: #fff;
    }
  }
  .list {
    padding: 0 80rpx;
    padding-top: 15rpx;
    padding-bottom: 30rpx;
    .list-box {
      max-height: 340rpx;
      overflow-y: scroll;
      margin-bottom: 40rpx;
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 84rpx;
        &:last-child {
          margin-bottom: 0;
        }
        .name {
          color: #333;
          font-weight: 600;
          font-size: 30rpx;
          margin-right: 71rpx;
          width: 170rpx;
        }
        .edit {
          width: 44rpx;
          height: 44rpx;
          margin-right: 50rpx;
        }
        .status {
        }
      }
    }

    .btn {
      width: 100%;
      height: 88rpx;
      background-color: #3e73fe;
      font-size: 31rpx;
      text-align: center;
      line-height: 88rpx;
      border-radius: 88rpx;
      color: #fff;
    }
  }
}
</style>
